<template>
  <div class="col main-content" style="padding-bottom: 0px">
    <div class="row tool-bar" style="padding: 0;margin-bottom: 0;">
      <div class="purchase-side">
        <el-row :gutter="20">
          <el-form :model="form">
            <el-form-item>
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-input v-model="form.key" placeholder="请输入要查询的供应商信息或单号">
                    <el-button slot="append" @click="search" icon="el-icon-search"></el-button>
                  </el-input>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
          <el-button type="text" @click="create"
                     style="width: 100%;border: 1px dashed #d9d9d9;margin-top: 10px;"
          > +添加采购单
          </el-button>
        </el-row>
        <el-row :gutter="20" class="purchase-list" v-loading="sideLoading">
          <div v-for="item in purchases">
            <div class="purchase-item">
              <el-row style="margin-bottom: 2px;">
                <el-col :span="12">
                  <span>系统单号:  <router-link
                    :to="'/admin/purchase/purchases/'+item.id+'/detail.html'">{{item.sn}}</router-link></span>
                </el-col>
                <el-col :span="12" style="text-align: right">
                   <span class="purchase-status" v-if="item.arrivalNum==0">
                    未到货
                  </span>
                  <span class="purchase-status" v-if="item.arrivalNum>0 &&item.orderNum>item.arrivalNum">
                    部分到货
                    </span>
                  <span class="purchase-status" v-if="item.arrivalNum>0 &&item.orderNum<=item.arrivalNum">
                    全部到货
                  </span>
                </el-col>
              </el-row>
              <el-row class="purchase-detail">
                <el-col :span="12">
                  <span>采购单号: {{item.orderSn}}</span>
                </el-col>
                <el-col :span="12">
                  <span>采购日期: {{item.orderDate}}</span>
                </el-col>
              </el-row>
              <el-row class="purchase-detail">
                <el-col :span="12">
                  <span>供货商: <a :href="item.supply.url"> {{item.supply.name}}</a> </span>
                </el-col>
                <el-col :span="12">
                  <span>录入日期: {{item.createTime|shortDate}}</span>
                </el-col>
              </el-row>
              <el-row class="purchase-detail">
                <el-col :span="12">
                  <span>采购数量: {{item.orderNum}}</span>
                </el-col>
                <el-col :span="12">
                  <span>库存数量: <span class="red">{{item.arrivalNum-item.sellNum}}</span></span>
                </el-col>
              </el-row>
              <el-row class="purchase-detail">
                <el-col :span="24">
                  <span>备注:</span><span class="red">{{item.note}}</span>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-row>
        <div class="purchase-page">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="form.pagination.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="form.pagination.limit"
            layout="total, prev, pager, next"
            :total="form.pagination.total"
          >
          </el-pagination>
        </div>
      </div>
      <div class="col purchase-content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
  import AdminService from 'src/service/admin'
  import ElCollapse from 'element-ui/packages/collapse/src/collapse'

  export default {
    components: {ElCollapse},
    name: 'AdminPurchase',
    data() {
      return {
        purchases: [],
        sideLoading: false,
        form: {
          searchDate: '',
          key: '',
          pagination: {
            total: 0,
            page: 1,
            limit: 10
          },
          orderBy: "a.id desc"
        }
      }
    },
    filters: {
      shortDate: function (s) {
        const s_index = s.indexOf(' ')
        if (s_index > -1) {
          return s.substring(0, s_index)
        }
        return s
      }
    },
    methods: {
      handleCurrentChange: function (page) {
        this.form.pagination.page = page
        this.getDatas(true)
      },
      create: function () {
        const t = new Date().getTime()
        this.$router.push('/admin/purchase/purchases/' + t + '/create.html')
      },
      search: function () {
        this.form.pagination.page = 1
        this.getDatas()
      },
      getDatas: function (toDetali) {
        const me = this
        me.sideLoading = true;
        AdminService.searchPurchase(this.form).then(data => {
          if (data != null) {
            me.purchases = data.datas
            me.form.pagination = data.pagination
            if (toDetali && me.purchases != null && me.purchases.length > 0) {
              me.$router.push('/admin/purchase/purchases/' + me.purchases[0].id + '/detail.html')
            }
          }
          me.sideLoading = false;
        })
      }
    },
    mounted: function () {
      if (this.$route.path === '/admin/purchase/purchases.html') {
        this.getDatas(true)
      }
      else {
        this.getDatas(false)
      }
    },
    beforeRouteUpdate: function (to, from, next) {
      const me = this
      if (to.path === '/admin/purchase/purchases.html') {
        this.getDatas(true)
      }
      next()
    }
  }
</script>
